<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>异步组件</title>
    <script src='./vue.global.js'></script>
</head>

<body>
    <div id='app'>
        <!-- <async-com></async-com> -->

        <!-- suspense悬挂/挂起/束之高阁 Vue中用于加载异步组件的组件  -->
        <suspense>
            <!-- default默认插槽放置异步组件的真实内容 -->
            <!-- <template v-slot:default> -->
            <template #default>
                <async-com></async-com>
            </template>

            <!-- fallback插槽放置等待加载的过程中要显示的内容 -->
            <!-- <template v-slot:fallback> -->
            <template #fallback>
                <h1>一大波异步组件正在赶来...</h1>
            </template>
        </suspense>

    </div>



    <script>

        // 从Vue对象中解构出两个函数
        const { createApp, defineAsyncComponent } = Vue

        const app = createApp({
            data() {
                return {}
            },
            methods: {},
            computed: {}
        })

        /* 定义一个异步组件 */
        const AsyncCom = defineAsyncComponent(

            /* 入参是一个回调函数：需要加载异步组件时回调这个函数 */
            () => new Promise(
                /* 3秒后兑现组件的具体内容 */
                (resolve) => {
                    setTimeout(() => {
                        resolve({
                            template: `<div>哥是异步组件，哥的数据量是狠大的，哥的加载需要一定的时间</div>`
                        })
                    }, 3000);
                }
            )

        )

        // 用定义好的异步组件覆盖原来的配置对象
        // app.component("async-com",{data(){},template:``})
        app.component("async-com",AsyncCom)

        app.mount('#app')
    </script>
</body>

</html>